<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>谷粒商城优惠卷详细</title>
    <link rel="stylesheet" href="/static/member/css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style media="screen">
        * {
            font-family: "微软雅黑";
        }

        ul li {
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id="nav">
    <nav>
        <div class="myjd">
            <h3>我的谷粒商城</h3>
            <button onclick="location.href='http://gulimall.com'">返回谷粒商城首页</button>
        </div>
        <ul class="nav_ul">
            <li>首页</li>
            <li class="li hover">账户设置<i class="ul_i"></i>
                <ol>
                    <li>个人信息</li>
                    <li>账户安全</li>
                    <li>我的尺码</li>
                    <li>账号绑定</li>
                    <li>收货地址</li>
                    <li>用药人信息</li>
                    <li>分享绑定</li>
                    <li>邮件订阅</li>
                    <li>应用授权</li>
                    <li>快捷支付</li>
                    <li>增票资质</li>
                    <li>企业发票</li>
                    <li>采购需求单</li>
                </ol>
            </li>
            <li class="li">社区<i class="ul_i"></i>
                <ol>
                    <li>个人主页</li>
                    <li>我的活动</li>
                    <li>我的圈子</li>
                    <li>我的帖子</li>
                </ol>
            </li>
            <li>消息</li>
        </ul>
        <div class="right">
            <div class="btn">
                <input type="text" placeholder="空调">
                <button>搜索</button>
            </div>
            <ul class="shop">
                <li><i class="shop_che"></i>我的购物车
                    <ol>
                        <li>
                            <img src="/static/member/img/shop.png" alt="">
                            <div>购物车中还没有商品，赶紧选购吧</div>
                            <div style="clear:both;"></div>
                        </li>
                    </ol>
                </li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </nav>
</div>

<div style="clear:both;"></div>

<div id="big">

    <div id="bigLeft">
        <ul>
            <h5>订单中心</h5>
            <li style="color:#E4393C;font-weight:800;">我的订单</li>
            <li>我的活动</li>
            <li>评价晒单</li>
            <li>我的常购商品<img src="/static/member/img/new.png"></li>
            <li>购物助手</li>
        </ul>
        <ul>
            <h5>关注中心</h5>
            <li>关注的商品</li>
            <li>关注的店铺</li>
            <li>关注的专辑</li>
            <li>收藏的内容<img src="/static/member/img/new.png"></li>
            <li>关注的活动</li>
            <li>浏览历史</li>
        </ul>
        <ul>
            <h5>资产中心</h5>
            <li>小金库</li>
            <li>谷粒商城白条</li>
            <li>领货码</li>
            <li>余额</li>
            <li><a style="color: #000" href="http://member.gulimall.com/couponList.html">优惠券</a></li>
            <li>礼品卡</li>
            <li>京豆</li>
            <li>谷粒商城钢镚<img src="/static/member/img/new.png"></li>
        </ul>
        <ul>
            <h5>特色业务</h5>
            <li>我的营业厅</li>
            <li>谷粒商城通信</li>
            <li>定期购</li>
            <li>我的回收单</li>
            <li>节能补贴</li>
            <li>医药服务</li>
            <li>流量加油站</li>
            <li>黄金托管</li>
            <li>视频教育订单</li>
            <li>海外房产预约</li>
            <li>我的全球购</li>
            <li>装修服务</li>
        </ul>
        <ul>
            <h5>客户服务</h5>
            <li>返修退换货</li>
            <li>价格保护</li>
            <li>意见建议</li>
            <li>我的问答</li>
            <li>购买咨询</li>
            <li>交易纠纷</li>
            <li>谷粒商城维修</li>
            <li>上门预约服务</li>
            <li>我的发票</li>
            <li>举报中心</li>
        </ul>
        <ul>
            <h5>设置</h5>
            <li>个人信息</li>
            <li>收货地址</li>
            <li><img src="/static/member/img/59126ae3N1b306e2c.jpg" alt=""></li>
        </ul>
    </div>

    <div id="bigRight">
        <div class="myOrder">
            <p>优惠卷</p>
        </div>
        <div class="allBig">
            <div class="allOrder">
                <ul class="allOrderTop">
                    <li>
                        <ol>
                            <li>商城</li>
                            <li>金融</li>
                            <li>白条</li>
                            <li>拍的二手</li>
                            <div style="clear:both;"></div>
                        </ol>
                    </li>
                    <div class="clear:both;"></div>
                </ul>
            </div>

            <div class="details">
                <ul class="detailsUl">
                    <div class="detailsUlDiv">
                        <li style="font-size: 13px" class="detailsLiok detailsLi">可用优惠卷<i class="allBig_i"></i>
                            <ol>
                                <li>可用优惠卷</li>
                                <li>全部卷类型</li>
                                <li>新到账</li>
                                <li>即将过期</li>
                                <li>最优惠</li>
                            </ol>
                        </li>
                        <li class="detailsLi" style="font-size: 13px">全部卷类型</li>
                        <div style="clear:both;"></div>
                    </div>
                    <div style="clear:both;"></div>
                </ul>
            </div>

            <table class="table" th:each="couponVo:${couponVos}">
                <tr>
                    <td colspan="3" style="background:#F7F7F7">
                        <span>优惠卷类型:</span>
                        <span th:if="${couponVo.couponType==0}">全场赠卷</span>
                        <span th:if="${couponVo.couponType==1}">会员赠卷</span>
                        <span th:if="${couponVo.couponType==2}">购物赠卷</span>
                        <span th:if="${couponVo.couponType==3}">注册赠卷</span>
                        <span> [[${couponVo.couponName}]]</span>
                        <i class="table_i5 isShow"></i>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="display: flex">
                        <img th:src="${couponVo.couponImg}"
                             style="justify-content: flex-start;width: 50px;height: 50px;margin-left: 100px">
                    </td>
                    <td>
                        <span style="width: 100px">使用门槛:<span th:text="${couponVo.minPoint}"></span></span>
                    </td>
                    <td>
                        <span>使用类型:</span>
                        <span th:if="${couponVo.useType == 0}">全场通用</span>
                        <span th:if="${couponVo.useType == 1}">指定分类</span>
                        <span th:if="${couponVo.useType == 2}">指定商品</span>
                    </td>
                    <td>
                        <span>优惠码:</span>
                        <span th:text="${couponVo.code}"></span>
                    </td>
                    <td>
                        <span>使用状态</span>
                        <span th:if="${couponVo.useStatus == 0}">未使用</span>
                        <span th:if="${couponVo.useStatus == 1}">已使用</span>
                        <span th:if="${couponVo.useStatus == 2}">已过期</span>
                    </td>
                </tr>
            </table>

        </div>
    </div>
    <div class="box" th:if="catchCoupons!=null">
        <h4 style="color: #E4393C;margin-bottom: 10px">您有以下优惠卷可领取:</h4>
        <ul class="coupon-catch" th:each="catchCoupon: ${catchCoupons}">
            <li>
                <span th:text="${catchCoupon.couponName}" style="padding-right: 20px;font-size: 14px"></span>
                <button class="btn-box" data-coupon-id= '${catchCoupon.id}'
                        style="height: 20px;background-color: aqua;cursor: pointer">
                    领取优惠卷
                </button>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
    document.querySelector('.coupon-catch').addEventListener('click', function (event) {
        if (event.target.classList.contains('btn-box')) {
            const couponId = event.target.getAttribute('data-coupon-id');
            console.log('Clicked coupon ID:', couponId);
            axios.get('http://localhost:88/coupon/coupon/catch/' + couponId)
                .then(function (response) {
                    // 在这里处理响应数据
                    console.log('成功领取优惠券');
                })
                .catch(function (error) {
                    // 在这里处理错误
                    console.error('领取优惠券失败', error);
                });
        }
    });
</script>
<style>
    .box {
        width: 200px;
        height: 300px;
        background-color: #F7F7F7;
        position: absolute;
        right: 40px;
        top: 250px;
        border: 1px solid #cccccc
    }
</style>